<template>
  <div id="comment-box" class="comment-send-box">
    <div class="comment-input">
      <el-input
        v-model="newComment.content"
        type="textarea"
        resize="none"
        placeholder="登录后可发表评论"
      ></el-input>
    </div>
    <el-button class="comment-send" type="primary" @click="addComment"
      >发表</el-button
    >
  </div>
</template>

<script>
import { api } from "@/api";
import { StoreHandler } from "@/store/index";
export default {
  data() {
    return {
      newComment: {
        id: 0,
        aid: 0,
        uid: 0,
        content: "",
      },
    };
  },
  methods: {
    async addComment() {
      if (this.newComment.content == "") {
        this.$alert("内容不能为空!");
        return;
      }
      let UserInfo = StoreHandler.getters.getUserInfo();
      if (!UserInfo) {
        this.$alert("登录后才可发表评论!");
        return;
      }
      try {
        if (UserInfo) {
          this.newComment.aid = this.$route.query.id;
          this.newComment.uid = UserInfo.id;
          this.newComment.id =
            (await this.$axios(api.comment.getMaxId())).data + 1;
          await this.$axios(api.comment.addComment(this.newComment));
          this.$emit("reload-comment");
          this.$alert("发布成功!");
        }
      } catch (error) {
        if (error.response) {
          this.$alert(error.response.data.message);
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.comment-send-box {
  display: flex;
  .comment-input {
    flex: 1;
    padding-right: 20px;
  }
  .comment-send {
    width: 80px;
  }
}
</style>
